<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>安全会议记录</title>
    <link href="../lib/css/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/reset.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <script src="../lib/angular-1.3.0/angular.js"></script>
    <script type="text/javascript">
    var app = angular.module("app", []);
    app.controller("activityListCtrl", function($scope) {
        this.data = {
            isDown: false,
            queryInfo: {
                isDateOrder: false,
                isShowHighSearch: false,
                isShowRecordTable: false,
                isShowSignTable: false,
                isShowImagesTable: false
            },
            list: [{
                id: 1,
                field1: "2017-02-03"
            }, {
                id: 2
            }]
        };
        this.method = {
            checkRecordTable: function(value) {
                this.data.isShowRecordTable = true;
            }.bind(this),
            checkSignTable: function(value) {
                this.data.isShowSignTable = true;
            }.bind(this),
            checkImages: function(value) {
                this.data.isShowImagesTable = true;
            }.bind(this),
        };
    });
    </script>
</head>

<body ng-app="app" ng-controller="activityListCtrl as vm">
    <div class="main">
        <div class="main-header">
            <div class="pa-icon-div pull-left" style="color:black">
                <i class="fa fa-home"></i>
                <span>内页>安全活动><span style="color:#008bdd">安全会议列表</span></span>
            </div>
            <div class="pa-icon-div pull-right">
                <i class="fa fa-reply-all"></i>
                <span>返回</span>
            </div>
        </div>
        <div class="main-content">
            <form class="base-info">
                <div class="query-info">
                    <div class="first-search">
                        <div class="input-group">
                            <input type="text" class="search-combobox-input" placeholder="会议名称">
                            <span class="input-group-btn"><i class="fa fa-search icon-search"></i></span>
                            <span class="high-search" ng-click="vm.data.queryInfo.isShowHighSearch=!vm.data.queryInfo.isShowHighSearch">高级搜索</span>
                        </div>
                    </div>
                    <div class="second-search text-center" ng-show="vm.data.queryInfo.isShowHighSearch">
                        <div class="pa-form-control">
                            <label>会议时间：</label>
                            <input type="text" class="form-control-input">&nbsp;至&nbsp;
                            <input type="text" class="form-control-input">
                        </div>
                        <div class="pa-form-control pa-form-control-btn">
                            <button class="pa-btn" ng-click="vm.data.isShowTable = true">搜索</button>
                            <button class="pa-btn reset-btn" type="reset">重置</button>
                        </div>
                    </div>
                </div>
            </form>
            <div class="pa-table-container">
                <table class="pa-table">
                    <thead>
                        <tr>
                            <th class="sort-operate">
                                <span>会议时间</span>
                                <div class="time-sequence-btn">
                                    <div class="time-sequence-box" ng-class="{'active':data.queryInfo.isDateOrder}" ng-click="data.queryInfo.isDateOrder=!data.queryInfo.isDateOrder">
                                        <i class="fa fa-caret-up sort-size sort-size-big"></i>
                                    </div>
                                    <div class="time-sequence-box" ng-class="{'active':!data.queryInfo.isDateOrder}" ng-click="data.queryInfo.isDateOrder=!data.queryInfo.isDateOrder">
                                        <i class="fa fa-caret-down sort-size sort-size-small"></i>
                                    </div>
                                </div>
                            </th>
                            <th>会议名称</th>
                            <th>会议地点</th>
                            <th>组织部门</th>
                            <th>主持人</th>
                            <th class="operate-three">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="value in vm.data.list">
                            <td>{{value.field1||'-'}}</td>
                            <td>{{value.field2||'-'}}</td>
                            <td>{{value.field3||'-'}}</td>
                            <td>{{value.field4||'-'}}</td>
                            <td>{{value.field5||'-'}}</td>
                            <td style="display: inline-table;">
                                <div class="operate-del" ng-click="vm.method.checkRecordTable(value)">
                                    <i class="fa  fa-file-text-o detail-color"></i>
                                    <span>记录表</span>
                                </div>
                                <div class="operate-del" ng-click="vm.method.checkSignTable(value)">
                                    <i class="fa  fa-file-text-o detail-color"></i>
                                    <span>签到表</span>
                                </div>
                                <div class="operate-del" ng-click="vm.method.checkImages(value)">
                                    <i class="fa  fa-camera detail-color"></i>
                                    <span>影像资料</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <!-- 会议记录表 -->
        <div class="right-pop-div" ng-show="vm.data.isShowRecordTable">
            <div class="back-btn" ng-click="vm.data.isShowRecordTable = false">
                <返回</div>
                        <div class="text-right" style="line-height: 90px; margin-top: -90px;color:#008bdd">
                            <i class="fa fa-refresh"></i>
                            <span>记录表打印</span>
                        </div>
                    <table style="width:100%">
                        <tbody>
                            <tr>
                                <td colspan="10" class="text-center border-none">锡通高速工程项目</td>
                            </tr>
                            <tr>
                                <td colspan="5" class="border-none">
                                    <span>承包单位：</span>
                                    <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666">无锡路桥集团有限公司</div>
                                </td>
                                <td colspan="5" class="text-right border-none">
                                    <span>合同号：</span>
                                    <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666" class="text-left">0512</div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" class="border-none">
                                    <span>监理单位：</span>
                                    <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666">监理单位：</div>
                                </td>
                                <td colspan="5" class="text-right border-none">
                                    <span>编&nbsp;&nbsp;&nbsp;号：</span>
                                    <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666" class="text-left">0512</div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="10" class="text-center border-none">安全会议记录表</td>
                            </tr>
                            <tr>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none"></td>
                                <td class="border-none text-right">表B-4</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-center">会议名称</td>
                                <td colspan="3">桥梁结构施工安全</td>
                                <td colspan="2" class="text-center">会议时间</td>
                                <td colspan="3">2017-02-04</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-center">会议地点</td>
                                <td colspan="3">桥梁三队</td>
                                <td colspan="2" class="text-center">主持人</td>
                                <td colspan="3">张三</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-center">组织部门</td>
                                <td colspan="3">无锡路桥集团有限公司</td>
                                <td colspan="2" class="text-center">记录人</td>
                                <td colspan="3">李四</td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-center">出席对象</td>
                                <td colspan="8">施工队</td>
                            </tr>
                            <tr>
                                <td class="border-bottom-none"></td>
                                <td colspan="9" rowspan="8" style="vertical-align: top;">
                                    <div style="height:360px;position: relative;">
                                        <p>见附件</p>
                                        <div style="position: absolute;bottom:10px">
                                            <span>附件名</span>
                                            <div style="display: inline-block;">
                                                <button class="pa-btn">下载</button>
                                                <button class="pa-btn reset-btn">预览</button>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="border-bottom-top-none" style="width:52px">会</td>
                            </tr>
                            <tr>
                                <td class="border-bottom-top-none">议</td>
                            </tr>
                            <tr>
                                <td class="border-bottom-top-none">主</td>
                            </tr>
                            <tr>
                                <td class="border-bottom-top-none">要</td>
                            </tr>
                            <tr>
                                <td class="border-bottom-top-none">内</td>
                            </tr>
                            <tr>
                                <td class="border-bottom-top-none">容</td>
                            </tr>
                            <tr>
                                <td class="border-top-none"></td>
                            </tr>
                        </tbody>
                    </table>
            </div>
            <!-- 签到表 -->
            <div class="right-pop-div" ng-show="vm.data.isShowSignTable">
                <div class="back-btn" ng-click="vm.data.isShowSignTable = false">
                    <返回</div>
                            <div class="text-right" style="line-height: 90px; margin-top: -90px;color:#008bdd">
                                <i class="fa fa-refresh"></i>
                                <span>签到表打印</span>
                            </div>
                        <table style="width:100%">
                            <tbody>
                                <tr>
                                    <td colspan="10" class="text-center border-none">锡通高速工程项目</td>
                                </tr>
                                <tr>
                                    <td colspan="5" class="border-none">
                                        <span>承包单位：</span>
                                        <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666">无锡路桥集团有限公司</div>
                                    </td>
                                    <td colspan="5" class="text-right border-none">
                                        <span>合同号：</span>
                                        <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666" class="text-left">0512</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="5" class="border-none">
                                        <span>监理单位：</span>
                                        <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666">监理单位：</div>
                                    </td>
                                    <td colspan="5" class="text-right border-none">
                                        <span>编&nbsp;&nbsp;&nbsp;号：</span>
                                        <div style="display:inline-block;min-width:120px;border-bottom:1px solid #666" class="text-left">0512</div>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="10" class="text-center border-none">安全会议签到表</td>
                                </tr>
                                <tr>
                                    <td colspan="10" class="border-none text-right">表C-5</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">会议名称</td>
                                    <td colspan="4">桥梁结构施工安全</td>
                                    <td colspan="2" class="text-center">会议时间</td>
                                    <td colspan="2">2017-02-04</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">会议地点</td>
                                    <td colspan="4">桥梁三队</td>
                                    <td colspan="2" class="text-center">主持人</td>
                                    <td colspan="2">张三</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">组织部门</td>
                                    <td colspan="4">无锡路桥集团有限公司</td>
                                    <td colspan="2" class="text-center">实到人数</td>
                                    <td colspan="2">120</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">序号</td>
                                    <td colspan="2" class="text-center">姓名</td>
                                    <td colspan="2" class="text-center">部门（施工队）</td>
                                    <td colspan="2" class="text-center">职位（岗位）</td>
                                    <td colspan="2" class="text-center">签到</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">110</td>
                                    <td colspan="2" class="text-center">张三</td>
                                    <td colspan="2" class="text-center">桥梁三队</td>
                                    <td colspan="2" class="text-center">普工</td>
                                    <td colspan="2" class="text-center">指纹</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">110</td>
                                    <td colspan="2" class="text-center">张三</td>
                                    <td colspan="2" class="text-center">桥梁三队</td>
                                    <td colspan="2" class="text-center">普工</td>
                                    <td colspan="2" class="text-center">指纹</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">110</td>
                                    <td colspan="2" class="text-center">张三</td>
                                    <td colspan="2" class="text-center">桥梁三队</td>
                                    <td colspan="2" class="text-center">普工</td>
                                    <td colspan="2" class="text-center">指纹</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">110</td>
                                    <td colspan="2" class="text-center">张三</td>
                                    <td colspan="2" class="text-center">桥梁三队</td>
                                    <td colspan="2" class="text-center">普工</td>
                                    <td colspan="2" class="text-center">指纹</td>
                                </tr>
                                <tr>
                                    <td colspan="2" class="text-center">110</td>
                                    <td colspan="2" class="text-center">张三</td>
                                    <td colspan="2" class="text-center">桥梁三队</td>
                                    <td colspan="2" class="text-center">普工</td>
                                    <td colspan="2" class="text-center">指纹</td>
                                </tr>
                            </tbody>
                        </table>
                </div>
                <!-- 影像资料 -->
                <div class="right-pop-img-div" ng-show="vm.data.isShowImagesTable">
                    <div class="back-btn" ng-click="vm.data.isShowImagesTable = false">
                        <返回</div>
                            <div class="text-center" style="line-height: 90px; margin-top: -90px;">影像资料</div>
                            <div style="width:100%;font-size:0">
                                <div class="img-item">
                                    <img src="../image/imgData01.png">
                                </div>
                                <div class="img-item">
                                    <img src="../image/imgData01.png">
                                </div>
                                <div class="img-item">
                                    <img src="../image/imgData01.png">
                                </div>
                                <div class="img-item">
                                    <img src="../image/imgData01.png">
                                </div>
                                <div class="img-item">
                                    <img src="../image/imgData01.png">
                                </div>
                            </div>
                    </div>
                    <div class="backdrop" ng-show="vm.data.isShowRecordTable ||  vm.data.isShowImagesTable || vm.data.isShowSignTable"></div>
                </div>
</body>

</html>
<style type="text/css">
.main {
    min-height: 100%;
    padding: 0 20px;
    background-color: #e8eff7;
    margin-top: 60px;
    position: relative;
}

.main-header {
    height: 32px;
    line-height: 32px;
    padding: 15px;
}

.main-content {
    padding: 10px;
    -webkit-box-shadow: 0 0 10px #d6dce3;
    -moz-box-shadow: 0 0 10px #d6dce3;
    box-shadow: 0 0 10px #d6dce3;
}

.query-info {
    font-size: 0;
    margin: 0 !important;
}

.search-combobox-input {
  padding: 0 5px;
}

.pa-act-register {
    float: right;
    margin-left: 20px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #008bdd;
    cursor: pointer;
}

.pa-act-register p {
    margin: 0;
    color: #666;
    background-color: white;
}

.pa-act-register p a {
    padding: 5px 10px;
    width: 100%;
}

.pa-act-register p:hover {
    /*background-color: #ddd;*/
    color: #008bdd;
}

.pa-icon-div {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #008bdd;
    cursor: pointer;
}

.pa-table-container {
    margin: 0;
    padding-bottom: 10px;
}

.time-sequence-box i {
    color: #ddd;
}

.time-sequence-box.active i {
    color: black;
}

.padding {
    padding: 5px;
}

.main-footer {
    margin-top: 10px;
}

.right-pop-div {
    padding: 35px 100px;
    font-size: 14px;
    width: 520px;
    /*height: 100%;*/
    position: absolute;
    top: 0;
    right: 1px;
    z-index: 999;
    background-color: white;
}


/*影像资料*/

.right-pop-img-div {
    padding: 35px 10px;
    font-size: 14px;
    width: 700px;
    position: absolute;
    top: 0;
    right: 1px;
    z-index: 999;
    background-color: white;
}

.right-pop-img-div .img-item img {
    width: 330px;
    padding-bottom: 15px;
}

.img-item {
    width: 50%;
    display: inline-block;
    text-align: center;
}

.border-bottom-top-none {
    border-top: none !important;
    border-bottom: none !important;
    text-align: center;
}

.border-bottom-none {
    border-bottom: none !important;
}

.border-top-none {
    border-top: none !important;
}

.border-none {
    border: none !important;
}

.right-pop-div table td {
    border: 1px solid #ddd;
    padding: 10px;
    vertical-align: middle;
}

.back-btn {
    display: inline-block;
    width: 70px;
    height: 70px;
    background-color: black;
    line-height: 70px;
    text-align: center;
    border-radius: 70px;
    border: 10px solid #c7c7c7;
    color: white;
    cursor: pointer;
}

.right-pop-div .back-btn {
    margin-left: -145px;
}

.right-pop-img-div .back-btn {
    margin-left: -55px;
}

.backdrop {
    height: 100%;
    width: 100%;
    background-color: black;
    position: absolute;
    top: 0;
    min-height: 904px;
    opacity: 0.3;
    left: 0
}
</style>
